<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- SlidesJS Required (if responsive): Sets the page width to the device width. -->
  <meta name="viewport" content="width=device-width">
  <!-- End SlidesJS Required -->
		<link rel="stylesheet" href="css/example.css">
		<link rel="stylesheet" type="text/css" href="css/slider.css"/>
		<style type="text/css">
			.top-banner {
      background-color: #333;
    }
			
		</style>
		
  <!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
  <style>
    #slides {
      display: none
    }

    .container {
      margin: 0 auto
    }

    /* For tablets & smart phones */
    @media (max-width: 767px) {
      body {
        padding-left: 20px;
        padding-right: 20px;
      }
      .container {
        width: auto
      }
    }

    /* For smartphones */
    @media (max-width: 480px) {
      .container {
        width: auto
      }
    }

    /* For smaller displays like laptops */
    @media (min-width: 768px) and (max-width: 979px) {
      .container {
        width: 750px
      }
    }

    /* For larger displays */
    @media (min-width: 980px) and (min-width: 1200px) {
      .container {
        width: 940px
      }
    }
  </style>
		 <link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
		<script src="js/jquery-1.9.1.min.js"></script>
  		<script src="js/jquery.slides.min.js"></script>
  <script  type="text/javascript">
    $(function() {
      $('#slides').slidesjs({
        width: 400,
        height: 360,
        play: {
          active: true,
          auto: true,
          interval: 2000,
          swap: true
        }
      });
    });
  </script>
  <script src="http://dreamsky.github.io/main/blog/common/init.js"></script>
	</head>
	<body>
	<div class="container" style="margin-top:60px;">
    <div id="slides">
      <img src="img/example-slide-1.jpg">
      <img src="img/example-slide-2.jpg">
      <img src="img/example-slide-3.jpg">
      <img src="img/example-slide-4.jpg">
    </div>
  </div>
  <div class="footer-banner" style="width:728px; margin:30px auto"></div>
	</body>
</html>
